<template>
    <div class="main-page">
        <el-form :model="formData" ref="formData"
                 size="mini" class="demo-form-inline">

            <el-row v-for="(item,index) in configs" :key="index" class="item-row">
                <el-col :span="8">
                    <el-row type="flex" justify="space-between">
                        <div class="config-item-title">{{item.title}}</div>
                        <el-switch
                                   @change="modifySetting(item)"
                            v-model="item.defaultv"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </el-row>
                    <el-row type="">
                        <div class="config-item-desc">{{item.desc}}</div>
                    </el-row>
                </el-col>
            </el-row>


        </el-form>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {modifySettingApi,notifysettingDetailApi} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {
                formData: {},
                configs: [{id: 1,'key':'lineset', 'title': '上网提醒', 'desc': '开启后,每天网上8：30系统自动向老师发送第二天的课程安排', 'defaultv': true},
                    {id: 2,'key':'endrecordset', 'title': '节课提醒', 'desc': '开启后,每天网上8：30系统自动向老师发送第二天的课程安排', 'defaultv': true},
                    {id: 3,'key':'leaveset', 'title': '请假提醒', 'desc': '开启后,每天网上8：30系统自动向老师发送第二天的课程安排', 'defaultv': true},
                    {id: 4,'key':'subset', 'title': '约课成功提醒', 'desc': '开启后,每天网上8：30系统自动向老师发送第二天的课程安排', 'defaultv': true}],
                notifysetting: {},


            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },

        computed: {
            ...mapGetters(['adminInfo', 'usertypeMap', 'userStatusMap', 'schoolList', 'channelList', 'periodList', 'empschoolMap', 'usertypeList', 'querytimelist'])
        },

        created() {
        },
        mounted() {

        this.notifysettingDetail();
        },
        methods: {
            ...mapActions([]),

            async notifysettingDetail() {
                const res = await notifysettingDetailApi({data:{orgid:1}});
                if (res.success == true) {
                    this.notifysetting = res.data;
                    this.initConfigs();

                }
            },
            initConfigs() {
                for (var item in this.notifysetting) {
                    var v = this.notifysetting[item];
                    var config = this.configs.find(c => c.key == item);
                    if(config!=''&&config!=null&&config!=undefined) {
                        config['defaultv'] = v===1? true:false;
                    }
                }

            },

            async modifySetting(item) {
                var obj = {};
                obj['orgid'] = 1;
                obj[item.key] = item.defaultv==true?1:0;
                const res = await modifySettingApi({data: obj});
                if (res.success == true) {
                    console.info("modify setting:" + JSON.stringify({data: item}))
                }
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .item-row {
        margin-bottom: 20px;
    }

    .config-item-title {
        font-size: 14px;
        font-weight: bold;
    }

    .config-item-desc {
        color: #929292;
        font-size:13px;

    }


</style>
